<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <h2>{{n}}</h2>
        <button @click="bye"></button>
        <button @click="add"></button>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({ 
        el:'#root',//如果没有el，要用vm.$mount(el)来绑定
        data:{
            n:1
        },
        template:'',//用于写容器里面的结构，但注意只能有一个根元素，即如果写在div里面，要用个大div包裹所有要写的元素，但是这个div会替换掉原来的div(root)
        methods: {
            add(){
                this.n++
            },
            bye(){
                console.log('摧毁')
                this.$destroy()//销毁实例，解除和其他实例的连接，解除全部指令和自定义事件 （类似click是dom自带的不会解除）
            }
        },
        beforeCreate() {
            console.log('初始化'+this.n)//没有n，因为还没有数据监测和代理
        },
        created() {
            console.log('初始化结束'+this.n)//数据代理结束
        },
        beforeMount() {
            console.log('解析完还没挂载，只存在内存中,在这里的DOM操作都没用，因为最终会被vue的DOM替换') 
            
        },
        mounted() {//重要钩子
            console.log('挂载成功，可以操作DOM,尽可能避免')
        },
        beforeUpdate() {
            console.log('数据更新但是页面没更新')
        },
        updated() {
            console.log('经历虚拟dom重新渲染之后页面也更新')
        },
        beforeDestroy() {//此时操作数据就不会引起更新了，重要钩子
            console.log('所以都还可用，关闭定时器，订阅消息。。。')
            console.log(this.n)
        },
        destroyed() {//没什么实际作用
            console.log('销毁完毕')
        },
    })
    </script>
</body>
</html>